<template>
  <header class="header">
    <!-- 头部个人部分 -->
    <div class="header-top d-flex justify-content-between">
      <p v-if="$store.state.islogin">
        <span style="cursor: default">欢迎您 &nbsp;&nbsp;&nbsp;{{this.phone}}！</span>
      </p>
      <p v-else>
        <span style="cursor: default">欢迎您来到易网聚鲜！</span>
        <span><router-link to="/login">【登录】</router-link></span>
        <span><router-link to="/register">快速注册</router-link></span>
      </p>
      <p>
        <span @click="goIndex">商城首页</span>
        <span>卖家中心</span>
        <span>个人中心</span>
        <span>我的订单</span>
        <span>成长中心</span>
        <span style="cursor: default"
          >语言：
          <select name="language" id="">
            <option value="cn">中文</option>
            <option value="en">英文</option>
          </select>
        </span>
      </p>
    </div>
    <!-- 头部，搜索，购物车 app下载 -->
    <div class="header-bot">
      <div class="header-bot-info d-flex justify-content-around">
        <!-- logo -->
        <h1>
          <a href="https://www.ewfresh.com" class="home-logo">
            <img src="../../public/img/myheader/logo.png" alt=""
          /></a>
        </h1>
        <!-- 搜索 -->
        <div class="search position-relative">
          <div class="position-absolute goods-sto">
            <span class="btn-danger">商品</span>
            <span class="btn-light">店铺</span>
          </div>
          <input
            type="text"
            name=""
            id="input-searh"
            placeholder="请输入要查询的商品"
            v-model="str"
            @keyup.13="search"
          />
          <img
            src="../../public/img/myheader/search.png"
            alt=""
            class="home-search-logo"
          />
          <button class="button-search" @click="search" >搜索</button>
        </div>
        <!-- app下载 -->
        <div class="app-load">
          <p>下载APP</p>
          <p>登录注册,享更多优惠</p>
          <img src="../../public/img/myheader/image.png" alt="" class="" />
        </div>
      </div>
    </div>
  </header>
</template>
<script>
import {mapState} from "vuex"
import axios from "axios"
export default {
  
  data() {
    return {
      str: "",
    };
  },
  methods: {
    search() {
      console.log(`搜索 ${this.str} 相关的内容`);
      this.$router.push(`/lists/${this.str}`)
    },
    goIndex(){
      this.$router.push('/')
    }
  },
  // mounted() {
  //   axios.get("/search",{
  //     params:{
  //       laptop_name:this.str,
  //     }
  //   }).then(result=>{
  //     console.log(result.data)
  //   })
  // },
  computed:{
    ...mapState(["phone"])
  }
};
</script>
 <style>
* {
  padding: 0;
  margin: 0;
}

/* 头部定义 */
.header {
  width: 100%;
  min-width: 100%;
  /* height: 30px; */

  line-height: 30px;
  font-size: 12px;
}
.header-top {
  height: 30px;
  background-color: #dddddd;
}
/* 头部顶部部分 */
.header-top,
.header-bot {
  margin: 0 auto;
}

.header-top p span {
  font-size: 12px;
  font-family: "微软雅黑";
  margin-left: 20px;
  cursor: pointer;
}
.header-top p span a {
  text-decoration: none;
  color: black;
}

.header-top p span:hover:not(.nohover),
.header-top p span a:hover:not(.nohover) {
  color: #cc1f3a;
  cursor: pointer;
}

p {
  margin-bottom: 0px;
}

/* 头部下部重要部分 */
.header-bot-info h1 img {
  margin: 37px 19px 37px 19px;
  vertical-align: middle;
}

/* logo部分 */
.home-logo {
  width: 204px;
  height: 134px;
  position: relative;
  margin-right: 100px;
  float: left;
}

/* 搜索部分 */
.search {
  margin-right: 30px;
}

.btn-light {
  background-color: #dddddd;
}

.btn-danger,
.btn-light {
  border-radius: 5px 5px 0 0;
  width: 30px;
}

/* 搜索栏 */
#input-searh {
  height: 44px;
  width: 568px;
  border: 1px solid #d61a39;
  border-radius: 3px;
  padding-left: 35px;
  outline: none;
  margin-top: 45px;
  vertical-align: middle;
}

#input-searh:hover {
  border-color: black;
}

.goods-sto {
  top: 21px;
}

.goods-sto span {
  cursor: pointer;
}

.home-search-logo {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 15px;
  height: 15px;
}

.button-search {
  width: 100px;
  height: 43px;
  border: 0;
  line-height: 43px;
  background: #d61a39;
  position: absolute;
  top: 45px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  right: 0;
  color: white;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}

/* app下载部分 */
.app-load {
  width: 90px;
  height: 120px;
  margin-top: 14px;
  background: #d61a39;
  background: linear-gradient(#d61a39, #f35a4a);
  border-radius: 3px;
  float: left;
  cursor: pointer;
  margin-left: 140px;
}

.app-load > p:first-child {
  width: 90px;
  margin-top: 3px;
  text-align: center;
  color: white;
  margin-bottom: -5px;
  line-height: 18px;
}

.app-load > p:nth-child(2) {
  display: inline-block;
  width: 170px !important;
  margin-top: -5px;
  text-align: center;
  color: white;
  transform: scale(0.6);
  font-size: 14px;
  margin-left: -40px;
  overflow: hidden;
}

.app-load > img {
  width: 80px;
  height: 80px;
  margin-top: -15px;
  margin-left: 5px;
}
</style>